<template>
  <BasicModal
    v-bind="$attrs"
    :title="t('routes.demo.FigureDocSettings.typeBind')"
    @register="register"
    @ok="handleSubmit"
    :destroyOnClose="true"
    :minHeight="600"
    :width="800"
  >
    <div style="display: flex; justify-content: center; align-items: center">
      <Transfer
        :titles="[
          t('routes.demo.partSetting.UnboundImageFileType'),
          t('routes.demo.partSetting.BoundImageFileType'),
        ]"
        :listStyle="{ width: '350px', height: '260px' }"
        :dataSource="allPartDocList"
        :targetKeys="partDocBingList"
        :render="(item) => item.title"
        @change="handlePartDocChange"
      />
    </div>
    <Divider />
    <div style="display: flex; justify-content: center; align-items: center">
      <Transfer
        :titles="[
          t('routes.demo.partSetting.UnboundAssociatedImageFileType'),
          t('routes.demo.partSetting.BoundAssociatedImageFileType'),
        ]"
        :listStyle="{ width: '350px', height: '260px' }"
        :dataSource="allAboutDocList"
        :targetKeys="aboutDocBingList"
        :render="(item) => item.title"
        @change="handleChange"
      />
    </div>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { Transfer, Divider } from 'ant-design-vue';
  import { getPartDocTypeList, updatePartDocTypeList } from '/@/api/demo/system';

  const { t } = useI18n();
  const { createMessage } = useMessage();
  const allAboutDocList = ref([]);
  const aboutDocBingList = ref([]);
  const allPartDocList = ref([]);
  const partDocBingList = ref([]);
  const DocTypeId = ref('');

  // 提交
  const handleSubmit = async () => {
    const filteredData = {
      allPartDocList: allPartDocList.value,
      partDocBingList: allPartDocList.value.filter((item) =>
        partDocBingList.value.includes(item.key),
      ),
      allAboutDocList: allAboutDocList.value,
      aboutDocBingList: allAboutDocList.value.filter((item) =>
        aboutDocBingList.value.includes(item.key),
      ),
    };
    updatePartDocTypeList(DocTypeId.value, filteredData).then((res) => {
      if (res) {
        createMessage.success(t('common.saveSuccess'));
        closeModal();
      }
    });
  };

  const handleChange = (nextTargetKeys: string[]) => {
    aboutDocBingList.value = nextTargetKeys;
  };

  const handlePartDocChange = (nextTargetKeys: string[]) => {
    partDocBingList.value = nextTargetKeys;
  };

  // 初始化弹窗
  const [register, { setModalProps, closeModal }] = useModalInner((data) => {
    setModalProps({ confirmLoading: false });
    DocTypeId.value = data.partid;
    getPartDocTypeList(data.partid).then((res) => {
      allAboutDocList.value = res.allAboutDocList === null ? [] : res.allAboutDocList;
      aboutDocBingList.value =
        res.aboutDocBingList === null ? [] : res.aboutDocBingList.map((item) => item.key);
      allPartDocList.value = res.allPartDocList === null ? [] : res.allPartDocList;
      partDocBingList.value =
        res.partDocBingList === null ? [] : res.partDocBingList.map((item) => item.key);
    });
  });
</script>

<style lang="less" scoped>
  // ::v-deep(.ant-transfer-list-header-title) {
  //   width: 200px !important;
  //   white-space: nowrap !important;
  //   overflow: hidden !important;
  //   text-overflow: ellipsis !important;
  // }
</style>
